<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>学生管理</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">
		<!-- 自定义样式 -->
		<style>
			body {
				background-color: #f3f3f3;
				/* overflow: hidden; */
				font-size: 10px;

			}

			#app {
				height: 100vh;
				/* background-image: url('../image/img/bgaddStu.png'); */
				background-size: contain;
				background-repeat: no-repeat;
			}

			.header {
				padding: 2rem;
			}

			.student-content {
				background-color: #fff;
				border-radius: 10px;
				margin: 0 1.6rem;
				margin-top: 2rem;
			}
			.grid-table {
				font-size: 0.7rem;
				font-weight: bold;
				margin-top: 0.4rem;
			}
			.grid-table-tr {
				font-size: 0.7rem;
			}
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
		</style>
	</head>

	<body style="font-size: 10px;">
		<div id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<div class="student-content">
				
				<van-form @failed="onFailed" @submit="onSubmit">
					<van-cell-group inset>
						<van-field required v-model="fromOjb.name" name="学生姓名" label="学生姓名" placeholder="请输入学生姓名"
							:rules="[{ required: true, message: '请填写学生姓名' }]" />
					</van-cell-group>
					<van-cell-group inset>
						<van-field name="radio" label="您的性别">
							<template #input>
								<van-radio-group v-model="fromOjb.sex" direction="horizontal">
									<van-radio name="true">男</van-radio>
									<van-radio name="false">女</van-radio>
								</van-radio-group>
							</template>
						</van-field>
					</van-cell-group>
					<van-cell-group inset>
						<van-field required v-model="fromOjb.bindCode" name="手机号码" label="手机号码" placeholder="请输入手机号码"
							:rules="[{ required: true, message: '请填写手机号码' }]" />
			
					</van-cell-group>
					<van-cell-group inset>
						<van-field v-model="fromOjb.wechatId" name="微信号" label="微信号" placeholder="请输入微信号" />
					</van-cell-group>
					<van-cell-group inset>
						<van-field required v-model="fromOjb.schoolName" name="就读学校" label="就读学校" placeholder="请输入就读学校"
							:rules="[{ required: true, message: '请填写就读学校' }]" />
					</van-cell-group>
					<van-cell-group inset>
						<van-field required v-model="fromOjb.gradesName"  is-link readonly @click="showGradesPicker = true"  name="就读年级" label="就读年级" placeholder="请输入就读年级" />
					</van-cell-group>
					<van-grid :column-num="4" class="grid-table" >
						<van-grid-item>
							已报名班级
						 </van-grid-item>
						 <van-grid-item>
						 	已报名课程
						  </van-grid-item>
						  <van-grid-item>
						  	剩余课程课时
						   </van-grid-item>
						   <van-grid-item>
						   	课程状态
						    </van-grid-item>
					</van-grid>	
					<van-grid class="grid-table-tr" :column-num="4" v-for="(item, index) in courseList" :key="index">
						  <van-grid-item>
							  {{item.className}}
						   </van-grid-item>
						   <van-grid-item>
						   	  {{item.courseName}}
						    </van-grid-item>
							<van-grid-item>
							  {{item.number}}
							 </van-grid-item>
							 <van-grid-item>
							   {{item.studentStatus}}
							  </van-grid-item>
					</van-grid>
			
					<div style="margin: 16px;">
						<van-button round block type="primary"  native-type="onSubmit">
							保存
						</van-button>
					</div>
				</van-form>
			</div>




		<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
			<van-picker
			  :columns="map2"
			  :model-value="pickerValue"
			  @confirm="onConfirm"
			  @cancel="showPicker = false"
			/>
		</van-popup>
		
		<van-popup v-model:show="showGradesPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="grades"
			    :model-value="pickerValue"
			    @confirm="onConfirmGrades"
			    @cancel="showGradesPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showDataSourcesPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="dataSources"
			    :model-value="pickerValue"
			    @confirm="onConfirmDataSources"
			    @cancel="showDataSourcesPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showDataStatusedPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="dataStatus"
			    :model-value="pickerValue"
			    @confirm="onConfirmDataStatus"
			    @cancel="showDataStatusedPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showCoursePicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="course"
			    :model-value="pickerValue"
			    @confirm="onConfirmCourse"
			    @cancel="showCoursePicker = false"
			  />
		</van-popup>

		<van-popup v-model:show="showStaffUserPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="staffUser"
			    :model-value="pickerValue"
			    @confirm="onConfirmStaffUser"
			    @cancel="showStaffUserPicker = false"
			  />
		</van-popup>
		<van-popup v-model:show="showFollowPersonPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="staffUser"
			    :model-value="pickerValue"
			    @confirm="onConfirmFollowPerson"
			    @cancel="showFollowPersonPicker = false"
			  />
		</van-popup>
		</div>



		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
			<script src="/scriptZIP/qs.min.js"></script>
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/js/common.js"></script>
		<!-- <script src="/js/common.js"></script> -->


		<script>
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						studentStatus: '在读',
						schoolId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						OjbList: {},
						active: '新增储备学员信息',
						showPicker: false,
						showGradesPicker: false,
						showDataSourcesPicker: false,
						showCoursePicker: false,
						showStaffUserPicker: false,
						showDataStatusedPicker: false,
						showFollowPersonPicker: false,
						grades: [],
						gradeName: '',
						relationship: '',
						pickerValue: [],
						sourceName: '',
						dataStatusName: '',
						courseName: '',
						staffUserName: '',
						followPersonName: '',
						agentId: '',
						studentId: '',
						fromOjb: {
							"avatar": null,
							"sex": 'true', //性别 男true  女false
							"wechatId": "",
							"agentId": "", //代理商id
							"cards": {}, //传空{}就行
							"status": "1", //这里默认1
							"fschoolId": "", //关联校区
							"schoolId": "", //分配校区
							"name": "", //姓名
							"schoolName": "", //就读学校
							"grade": 0, //年级
							"motherName": "", //母亲姓名 关系选择可参照后台
							"motherPhone": "", //联系电话
							"bindCode": "" ,//唯一手机号（绑定码）
							"relationship": []
						},
						// from2Ojb: {
						// 	"avatar": null, //图片文件名
						// 	"sex": 'true',  //性别 男true  女false
						// 	"agentId": "", //代理商id
						// 	"cards": {}, //传空{}就行
						// 	"status": "1", //这里默认1
						// 	"casea": [], //咨询课程多选
						// 	"name": "", //姓名
						// 	"schoolName": "", //就读学校
						// 	"grade": 0, //年级
						// 	"fatherName": "", //父亲姓名
						// 	"fatherPhone": "", //父亲电话
						// 	"bindCode": "", //唯一手机号（绑定码）
						// 	"source": 0, //学员来源
						// 	"fschoolId": 0, //关联校区
						// 	"dataStatusId": 0, //数据状态
						// 	"dataIntentId": 0, //数据意向
						// 	"promoter": 0, //推广人
						// 	"people": 0, //跟进人
						// 	"followReasonId": 0, //未报读理由
						// 	"schoolId": 0 //分配校区
						// },
						map2: [
							{ text: '父亲', value: 'father' },
							{ text: '母亲', value: 'mother' },
							{ text: '爷爷', value: 'grandfather' },
							{ text: '奶奶', value: 'grandmother' },
							{ text: '其他家人', value: 'other' },
						],
						fromOjb1: {},
						dataSources: [],
						dataStatus: [],
						course: [],
						staffUser: [],
						gradeList: [],
						courseList: []
					};
				},
				created: function() {
					this.schoolId = localStorage.getItem('schoolId');
					this.agentId = localStorage.getItem('agentId');
					this.studentId = params().studentId;
					this.getList()
					this.getGrade()
					this.getCourse()
					// this.getDataSources()
					// this.getCourse()
					// this.getStaffUser()
					// this.getList()

				},
				methods: {
					onFailed(errorInfo) {
						console.log('failed', errorInfo);
					},
					goBack() {
						history.back();
					},
					onSubmit(values) {
						 axios.put('/t/student', compare(this.fromOjb, this.fromOjb1)).then(function (res) {
		                        alert('成功');
		                 }.bind(this));
						// axios.put('/t/student', this.fromOjb).then(function (res) {
						// 	alert('添加成功');
						// }.bind(this));
					},
					// onSubmit2(values) {
					// 	axios.post('/t/student/addzs', this.from2Ojb).then(function (res) {
					// 		alert('添加成功');
					// 	}.bind(this));
					// },
					filterclick(st) {
						this.studentStatus = st;
						this.list = []
						this.pageNum = 1
						// this.finished = false;
						this.getList()
					},
					onConfirmGrades({ selectedValues, selectedOptions }) {
						this.fromOjb.grade = selectedOptions[0].value;
						this.fromOjb.gradesName = selectedOptions[0]?.text;
						this.showGradesPicker = false
						
					},
					onConfirm({ selectedValues, selectedOptions }) {
						this.fromOjb.relationship[0] = selectedOptions[0];
						this.relationship = selectedOptions[0]?.text;
						this.showPicker = false
					},
					onToLoad() {
						this.loading = true;
						setTimeout(() => {
							// if (this.refreshing) {
							//   this.list = [];
							//   this.refreshing = false;
							// }
							// this.refreshing = false;
							// for (let i = 0; i < 10; i++) {
							//   this.list.push(this.list.length + 1);
							// }
							this.loading = false;
							this.finished = true;
							// this.pageNum += 1;
							// this.pageNum += 1;

							this.getList()

							// 		if (this.list.length >= 40) {
							// 		  finished.value = true;
							// 		}
						}, 1000);
					},
					onRefresh() {
						this.Loading = true;
						this.finished = false;
						this.pageNum = 1;
						this.list = [];
						this.onToLoad()

					},
					onSearch() {
						this.list = []
						this.refreshing = true
						this.pageNum = 1
						this.getList()
					},
					getGrade() {
						axios.get('/t/grade/all').then(function (res) {
							res.data.forEach(item => {
								this.grades.push({'text': item.name, 'value': parseInt(item.id) })
							});
						}.bind(this));
					},
					getDataSources() {
						axios.get('/t/category/'+ this.agentId).then(function (res) {
							res.data.dataSource.forEach((item, index) => {
								this.dataSources.push({'text': item, 'value': index})
							});
							res.data.dataStatus.forEach((item, index) => {
								this.dataStatus.push({'text': item, 'value': index})
							});
							
						}.bind(this));
					},
					// getCourse() {
					// 	axios.get('/t/course/all/'+ this.agentId).then(function (res) {
					// 		res.data.forEach((item, index) => {
					// 			this.course.push({'text': item.name, 'value': item.id})
					// 		});
							
					// 	}.bind(this));
					// },
					getStaffUser() {
						axios.get('/t/staffUser/all/' + this.agentId).then(function (res) {
							res.data.forEach((item, index) => {
								this.staffUser.push({'text': item.name, 'value': item.id})
							});
						}.bind(this));
					},
					
					//代理商设置的课程
					onConfirmDataSources({ selectedValues, selectedOptions }) {
						this.from2Ojb.source = selectedOptions[0].value;
						this.sourceName = selectedOptions[0]?.text;
						this.showDataSourcesPicker = false
					},
					onConfirmDataStatus({ selectedValues, selectedOptions }) {
						this.from2Ojb.dataStatusId = selectedOptions[0].value;
						this.dataStatusName = selectedOptions[0]?.text;
						this.showDataStatusedPicker = false
					},
					onConfirmCourse({ selectedValues, selectedOptions }) {
						this.from2Ojb.course = selectedOptions[0].value;
						this.courseName = selectedOptions[0]?.text;
						this.showCoursePicker = false
					},
					onConfirmStaffUser({ selectedValues, selectedOptions }) {
						this.from2Ojb.people = selectedOptions[0].value;
						this.staffUserName = selectedOptions[0]?.text;
						this.showStaffUserPicker = false
					},
					onConfirmFollowPerson({ selectedValues, selectedOptions }) {
						this.from2Ojb.promoter = selectedOptions[0].value;
						this.followPersonName = selectedOptions[0]?.text;
						this.showFollowPersonPicker = false
					},
					getList() {
						axios.get('/t/student/' + this.studentId).then(function(res) {
							this.fromOjb = Object.assign(this.fromOjb, res.data)
							 this.fromOjb1 = copy(this.fromOjb);
							this.fromOjb.sex = this.fromOjb.sex.toString()
							this.fromOjb.gradesName = this.grades[ parseInt(this.fromOjb.grade) - 1]?.text || ''
						}.bind(this));
					},
					getCourse() {
						axios.get('/t/student/course/' + this.studentId).then(function(res) {
							this.courseList = res.data
						}.bind(this));
					},
					enterShop() {
						vant.Toast("进入店铺");
					},

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>